<template>
<div>
    <input type="text" @keyup.enter="handleEnter">
    <row v-for="todo in todoListChange" :key="todo.id" :todoOne='todo'></row>

    <btn :btn2='btn2' @handleChange='handleChangeBtn'></btn>
</div>
</template>

<script>
import btn from './btn';
import row from './row';

export default {
    components: {
        btn,
        row
    },
    data() {
        return {
            todoList: [],
            id: 0,
            btn2: 'all'
        }
    },
    computed: {
        todoListChange() {
            return this.todoList.filter((item) => {
                if(this.btn2 == 'all') {
                    return true
                }else{
                    let finish = this.btn2 == 'finish';
                    return item.isFinish == finish;
                }
            })
        }
    },
    methods: {
        handleChangeBtn(btn2) {
            console.log(btn2);
            this.btn2 = btn2
        },
        handleEnter(event) {
            this.todoList.push({id: ++this.id, text: event.target.value, isFinish: false})
            event.target.value = "";
        }
    }

}
</script>

<style>

</style>
